<template>
  <div>
    <el-container>
      <el-header height="70px">
        <p class="header_title">行为列表</p>
        <!--  -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>权限维护</el-breadcrumb-item>
          <el-breadcrumb-item>行为管理</el-breadcrumb-item>
          <el-breadcrumb-item>行为列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <el-main>
        <el-card class="box-card">
          <div slot="header">
            <span>行为列表</span>
            <span style="float: right;">
              <i class="el-icon-arrow-up"></i>
              <i class="el-icon-close"></i>
            </span>
          </div>
          <!--  -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input placeholder="根据名称查询" v-model="pagelist.name"  clearable>
                <el-button slot="append" icon="el-icon-search" @click="search" ></el-button>
              </el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary"  @click="addDialogVisible = true">添加行为</el-button>
            </el-col>
             <el-col :span="5">
                <b class="sum_data">数据总数：</b>
               <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.pagenum"
                :page-size="pagination.pagesize"
                 :page-sizes="[3, 5, 10, 20]"
                layout="total, sizes"
                :total="pagination.total"
                class="top_nav"
                >
               </el-pagination>
            </el-col>
          </el-row>

          <!-- 表格 -->
          <el-table :data="pagelist" style="width: 100%" border stripe width="800px">
            <el-table-column prop="name" label="名称" width="200px">
            </el-table-column>
            <el-table-column prop="date" label="创建时间"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="showEditDialog(scope.row)"
                  >编辑</el-button
                >
                <!-- 删除 -->
                <el-button type="danger" size="mini" @click="removeBehavior(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pagination.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          >
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>

    <!-- 添加对话框 -->
    <el-dialog
      title="添加行为信息"
      :visible.sync="addDialogVisible"
      width="60%"
      @close="addDialogClosed"
    >
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="行为" prop="name">
          <el-input v-model="addForm.name" type="text"></el-input>
        </el-form-item>
        <el-form-item label="路径" prop="uri">
          <el-select v-model="addForm.uri" placeholder="请选择路径">
            <el-option
              v-for="item in pagelist"
              :key="item.uri"
              :label="item.uri"
              :value="item.uri"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAction">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
      title="修改行为信息"
      :visible.sync="editDialogVisible"
      width="60%"
      @close="editDialogClosed"
    >
      <el-form
        :model="editlist"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
      >
        <el-form-item label="id号" prop="id">
          <el-input v-model="editlist.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="行为" prop="name">
          <el-input v-model="editlist.name" type="text"></el-input>
        </el-form-item>
        <el-form-item label="路径" prop="uri">
          <el-input v-model="editlist.uri"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editActionInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actionInfo: {
        authorities: "",
        // 每页显示5条数据
        pages: 5,
        total: 7,
      },
      // actionInfo里面的authorities数据
      actionlist: [],
      // 分页导航
      pagination: {
        // 当前页数
        pagenum: 1,
        // 页面显示多少条数据
        pagesize: 3,
        // 总数
        total: 7,
      },
      pagelist: [],
      // 添加对话框显示与隐藏
      addDialogVisible: false,
      addForm: {
        id: "",
        name: "",
        uri: "",
      },
      // 添加表单的校验
      addFormRules: {
        id: [{ required: true, message: "请输入数值", trigger: "blur" }],
        name: [{ required: true, message: "请输入行为名称", trigger: "blur" }],
        uri: [{ required: true, message: "请选择路径", trigger: "blur" }],
      },
      // 对话框的显示与隐藏
      editDialogVisible: false,
      // 查询用户信息对象
      editForm: {
        id: "",
        name: "",
        uri: "",
      },
      // 修改表单的校验规则对象
      editFormRules: {
        id: [{ required: true, message: "请输入数值", trigger: "blur" }],
        name: [{ required: true, message: "请输入行为名称", trigger: "blur" }],
        uri: [{ required: true, message: "请选择路径", trigger: "blur" }],
      },
      editlist: [],
     
    };
  },
  methods: {
    // 获取数据
    async getActionList() {
      const res = await this.http.get("authority/select", this.pagination);
      // this.actionlist = res
      this.pagelist = res.authorities;
      this.pagination.total = res.total;
      console.log("------数据渲染：-----");
      console.log(res);
      console.log(res.total);
    },
    // 监听pagesize的改变
    handleSizeChange(newSize) {
      // console.log(newSize);
      this.pagination.pagesize = newSize;
      this.getActionList();
    },
    // 监听 页码值 改变
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.pagination.pagenum = newPage;
      this.getActionList();
    },
    // 监听增添行为对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 添加行为
    addAction() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起添加网络请求
        const { res } = await this.http.post("/authority/add", this.addForm);

        if (status.code !== 200) {
          this.$message.error("添加行为失败");
        }
        this.$message.success("添加行为成功");
        this.addDialogVisible = false;
        this.getActionList();
      });
    },
    //编辑行为
    async showEditDialog(row) {
      const res = await this.http.post("/authority/update", this.editForm);

      this.editlist = row;
      this.editDialogVisible = true;
      console.log("---编辑数据：----");
      console.log(row);
      console.log("---id号-----");
      console.log(row.id);
      console.log("---编辑成功显示：--");
      console.log(res);
    },
    // 监听编辑对话框关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 是否完成编辑行为信息
    editActionInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        console.log(valid);
        if (!valid) return;
        // 发起修改信息的信息的数据请求
        const res = await this.http.post("/authority/update", this.editlist, {
          name: this.editlist.name,
          uri: this.editlist.uri,
        });

        if (status !== 400) {
          this.$message.error("编辑行为信息失败");
        }
        console.log(res);
        // 关闭对话框
        this.editDialogVisible = false;
        // 刷新数据列表
        this.getActionList();
        // 提交修改成功
        this.$message.success("更新行为信息成功");
      });
    },
    
    // 删除行为
    async removeBehavior(row) {
      console.log(row);
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((error) => error);
      console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      // this.deletelist = row.id;
      const res = await this.http.post("/authority/delete",row.id);
      console.log(res);
      this.getActionList();
    },
    // 搜索
    async search(){
      const res = await this.http.get('/authority/selectByName',{
        name:this.pagelist.name,
        pagenum:this.pagination.pagenum,
        pagesize:this.pagination.pagesize
        });
      // console.log(res);
      console.log(pagelist);
      
      this.pagelist = res.authorityList
    
      
    }
    
  },
  created() {
    this.getActionList();
  },
  computed:{
    
  }
}

</script>

<style scoped>

.text {
  font-size: 14px;
}
.el-input__inner {
  height: 25px;
}
.el-col {
  font-size: 14px;
  font-weight: 400;
  color: rgb(165, 164, 164);
}
</style>
